<!DOCTYPE html>
<html>

<head>
  <meta charset='utf-8'>
  <title>鼠标控制物体旋转</title>
  <link rel="shortcut icon" href="../icon/sparrow.png" />
  <link rel="bookmark" href="../icon/sparrow.png" type="image/x-icon" />
  <link rel="stylesheet" href="../style/common.css" />
  <!-- 对于制作原型或学习，你可以这样使用最新版本： -->
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  <script src="../lib/webgl-debug.js"></script>
  <script src="../lib/webgl-utils.js"></script>
  <script src="../lib/cuon-matrix.js"></script>
  <script src="../lib/cuon-utils.js"></script>
  <script src="../lib/allx-utils.js"></script>
</head>

<body>
  <div id='gl22'>
    <h2>gl22 利用键盘改变视点</h2>
    <canvas id="c22" width="400" height="400">
      您的浏览器不支持canvas
    </canvas>
    <script type="text/javascript">
      // 顶点着色器程序2
      let VSHADER_SOURCE22 = `
        attribute vec4 a_Position;
        attribute vec4 a_Color;
        uniform mat4 u_ViewMatrix;
        uniform mat4 u_ProjMatrix;
        varying vec4 v_Color;
        void main(){
          gl_Position=u_ProjMatrix*u_ViewMatrix*a_Position;
          v_Color=a_Color;
        }`;

      // 片元着色器程序2
      let FSHADER_SOURCE22 = `
        precision mediump float;
        varying vec4 v_Color;
        void main(){
          gl_FragColor=v_Color;
        }`;
      // 获取canvas，获取webGL绘图上下文
      const gl22 = getWebGLContext(document.querySelector("#c22"));
      if (!gl22) {
        console.log(Error("无法获得webgl的绘图上下文"));
      }
      // 初始化着色器
      if (!initShaders(gl22, VSHADER_SOURCE22, FSHADER_SOURCE22)) {
        console.log(Error("无法初始化着色器"));
      }

      // 设置顶点信息（传入attribute变量）
      let n22 = initVertexBuffers21(gl22);
      if (n22 < 0) {
        console.log(Error("无法设置顶点位置"));
      }

      // 传入uniform变量
      let u_viewMatrix22 = gl22.getUniformLocation(gl22.program, "u_ViewMatrix"); // 省略错误处理
      let u_projMatrix22 = gl22.getUniformLocation(gl22.program, "u_ProjMatrix"); // 省略错误处理

      // 设置视点、视线和上方向
      let viewMatrix22 = new Matrix4();
      viewMatrix22.setLookAt(0.2, 0.25, 0.25, 0, 0, 0, 0, 1, 0);
      gl22.uniformMatrix4fv(u_viewMatrix22, false, viewMatrix22.elements);

      // 创建指定可视空间的矩阵传入uniform变量
      let projMatrix22 = new Matrix4();
      projMatrix22.setOrtho(-1.0, 1.0, -1.0, 1.0, 0.0, 3.0); // left、right、bottom、top、near、far
      gl22.uniformMatrix4fv(u_projMatrix22, false, projMatrix22.elements);

      document.addEventListener("keydown", (event) => {
        // console.log(event.which);
        handleKeyDown(event, gl22, n22, u_viewMatrix22, viewMatrix22);
      })

      gl22.clearColor(0.0, 0.0, 0.0, 1.0);
      gl22.clear(gl22.COLOR_BUFFER_BIT);

      // 绘制
      gl22.drawArrays(gl22.TRIANGLES, 0, n22); // n7=3

      let ex = 0.2,
        ey = 0.25,
        ez = 0.25;

      function handleKeyDown(ev, gl, n, u_viewMatrix, viewMatrix) {
        if (ev.which === 39) { // 右
          ex += 0.1;
        } else if (ev.which === 37) { // 左
          ex -= 0.1;
        } else {
          return;
        }
        // drawModelView(gl, n, u_viewMatrix, viewMatrix, ex, ey, ez);
        drawModelView(gl, n, u_viewMatrix, viewMatrix);
      }

      function drawModelView(gl, n, u_viewMatrix, viewMatrix) {
        // 设置视点和视线
        viewMatrix.setLookAt(ex, ey, ez, 0, 0, 0, 0, 1, 0);
        // 将视图矩阵传递给uniform变量
        gl.uniformMatrix4fv(u_viewMatrix, false, viewMatrix.elements);
        // 清除
        gl.clear(gl.COLOR_BUFFER_BIT);
        // 绘制
        gl.drawArrays(gl.TRIANGLES, 0, n);
      }

      function initVertexBuffers21(gl) {
        let vertices = new Float32Array([
          // 顶点坐标、颜色
          0.0, 0.5, -0.4, 0.4, 1.0, 0.4, // 绿色三角形在最后面
          -0.5, -0.5, -0.4, 0.4, 1.0, 0.4,
          0.5, -0.5, -0.4, 1.0, 0.4, 0.4,

          0.5, 0.4, -0.2, 1.0, 0.4, 0.4, // 黄色三角形在最后面
          -0.5, 0.4, -0.2, 1.0, 1.0, 0.4,
          0.0, -0.6, -0.2, 1.0, 1.0, 0.4,

          0.0, 0.5, 0.0, 0.4, 0.4, 1.0, // 蓝色三角形在最后面
          -0.5, -0.5, 0.0, 0.4, 0.4, 1.0,
          0.5, -0.5, 0.0, 1.0, 0.4, 0.4
        ]);
        let n = 9;
        const FSIZE = vertices.BYTES_PER_ELEMENT;

        // 创建缓冲区对象
        const vertextBuffer = gl.createBuffer();
        if (!vertextBuffer) {
          console.log(Error("无法创建缓冲区对象"));
          return -1;
        }

        // 将缓冲区对象绑定到目标，写入数据
        gl.bindBuffer(gl.ARRAY_BUFFER, vertextBuffer);
        gl.bufferData(gl.ARRAY_BUFFER, vertices, gl.STATIC_DRAW);

        let a_position = gl.getAttribLocation(gl.program, "a_Position");
        if (a_position < 0) {
          console.log(Error("无法获取attribute变量的存储位置"));
          return -1;
        }
        // 将缓冲区对象分配给a_position变量，开启连接
        gl.vertexAttribPointer(a_position, 3, gl.FLOAT, false, FSIZE * 6, 0);
        gl.enableVertexAttribArray(a_position);

        let a_color = gl.getAttribLocation(gl.program, "a_Color");
        if (a_color < 0) {
          console.log(Error("无法获取attribute变量的存储位置"));
          return -1;
        }
        // 将缓冲区对象分配给a_position变量，开启连接
        gl.vertexAttribPointer(a_color, 3, gl.FLOAT, false, FSIZE * 6, FSIZE * 3);
        gl.enableVertexAttribArray(a_color);

        return n;
      }
    </script>
  </div>
</body>

</html>